<template>
  <div class="context" v-show="isshow">
    <span class="tip">{{ text }}</span>
  </div>
</template>

<script>
export default {
  name: "toast",
  props: {
    isshow: {
      type: Boolean
    },
    text: {
      type: String
    }
  },
  watch: {
    isshow(val) {
      if (val === true) {
        setTimeout(() => {
          this.isshow = false;
        }, 2000);
      }
    }
  }
};
</script>
<style scoped>
.context {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tip {
  background-color: rgba(40, 40, 40, 0.8);
  color: aliceblue;
  font-size: 0.6rem;
  padding: 10px;
  border-radius: 10px;
}
</style>
